<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<div id="time">
		<div class="input-div" v-show="formData.phone">
		     <input type="text" class="input code" name="code" v-model.trim="formData.code" placeholder="验证码">
		     <button @click="getCode(formData)" class="code-btn" :disabled="!show">
		         <span v-show="show">获取验证码</span>
		         <span v-show="!show" class="count">{{count}} s</span>
		     </button>
		</div>
	</div>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript">
		const TIME_COUNT = 60;
		var vm = new Vue({
			el:"#time",
	 		data(){
		      	return {
		        	formData: {
		          		phone:'18151851890',
		          		code:'',
		        	},
			        show: true,
			        count: '',
			        timer: null,
		    	}
			},

	    	methods:{
	        	getCode(formData){
	        		console.log(this.timer)
		            if (!this.timer) {
		                this.count = TIME_COUNT;
		                this.show = false;
		                this.timer = setInterval(() => {
		                  if (this.count > 0 && this.count <= TIME_COUNT) {
		                    this.count--;
		                  } else {
		                    this.show = true;
		                    clearInterval(this.timer);
		                    this.timer = null;
		                  }
		                }, 1000);
		            }
		        }
	    	}
		})
	</script>
</body>
</html>